<template>
    <div>
        <mt-header class="plain" title="更改密码">
            <mt-button icon="back" slot="left" @click="goBack">返回</mt-button>
            <mt-button slot="right" @click="goBack">取消</mt-button>
        </mt-header>

        <div class="info-container">
            <div class="option-item">
                <mt-field label="旧密码" type="password" class="spec" v-model="info.oldPassword"></mt-field>
            </div>
            <div class="option-item">
                <mt-field label="新密码" type="password" class="spec" v-model="info.newPassword"></mt-field>
            </div>
            <div class="option-item">
                <mt-field label="确认密码" type="password" class="spec" v-model="info.rePassword"></mt-field>
            </div>
            <div class="info-desc color-secondary text-left">
                密码必须至少8个字符，而且同时包含字母和数字
            </div>
            <!-- <div class="color-default text-left">
                <span @click="forgetPassword">忘记旧密码?</span>
            </div> -->
            <div class="info-button">
                <mt-button type="primary" style="width: 160px; height: 45px;" @click="submit">确定</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'
import { Const } from '@/consts'
import userApi from '@/api/user'

export default {
    data() {
        return {

            info: {
                oldPassword: '',
                newPassword: '',
                rePassword: ''
            }
        }
    },


    methods: {
        goBack() {
            this.$router.replace('/personal/setting/account')
        },
        forgetPassword() {
            this.$router.push('/personal/setting/password/forget')
        },


        formValidate(field) {

            if ((!field || field.indexOf('oldPassword') >= 0) && !this.info.oldPassword) {
                Toast('请填写旧密码');
                return false;
            }
            
            if ((!field || field.indexOf('newPassword') >= 0) && !this.info.newPassword) {
                Toast('请填写新密码');
                return false;
            }

            if ((!field || field.indexOf('newPassword') >= 0) && this.info.newPassword.length < 8) {
                Toast('密码至少包含8个字符');
                return false;
            }

            if ((!field || field.indexOf('newPassword') >= 0) && !/^[-0-9a-zA-Z!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~]+$/.test(this.info.newPassword)) {
                Toast('密码只能包含数字、字母和常见字符');
                return false;
            }

            if ((!field || field.indexOf('rePassword') >= 0) && this.info.newPassword != this.info.rePassword) {
                Toast('两次输入的密码不一致');
                return false;
            }

            return true;
        },


        submit() {

            // validation...
            if (!this.formValidate()) {
                return;
            }

            userApi.modifyPassword({
                params: {
                    oldpassword: this.info.oldPassword,
                    newpassword: this.info.newPassword
                }
            }).then(resp => {
                this.$router.replace('/personal/setting/account');
                Toast(resp[Const.RESP_MESSAGE]);
            }).catch(resp => {
                // Toast(resp[Const.RESP_MESSAGE]);
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '出错了 ...');
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
$offset-x: 16px;
$scale: 1.2;
.info-container {
    margin-left: $offset-x;
    margin-right: $offset-x;
    padding-top: 8px;
    border-top: 1px solid #dddddd;
    
    .info-avatar {
        margin: 24px 0 36px 0;
        img {
            width: 60px;
            height: 60px;
        }
    }

    .option-item {
        height: 48px;
        border-bottom: 1px solid #dddddd;
        font-size: 14px * $scale;
        text-align: left;
        color: #333333;
    }

    .info-desc {
        padding: 24px 0 18px 0;
        font-size: 12px * $scale;
    }

    .info-button {
        margin: 56px 0;
    }
}
</style>
